<template>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="选择" width="55" >
        <template #default="scope">
          <el-checkbox v-model="scope.row.state" size="large" @change="changeHandle(scope.$index)" :disabled="scope.row.state"/>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="130">
        <template #default="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="待办事项" width="250">
        <template #default="scope">{{ scope.row.content }}</template>
      </el-table-column>
      <el-table-column label="创建时间" width="120">
        <template #default="scope">{{ scope.row.startDate }}</template>
      </el-table-column>
      <el-table-column label="完成时间" width="120">
        <template #default="scope">{{ scope.row.finishDate }}</template>
      </el-table-column>
      <el-table-column fixed="right" label="删除" min-width="60">
      <template #default="scope">
        <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
</template>

<script>
import { ElMessageBox } from 'element-plus'
export default {
  props:{list:Array},  //从父组件接收数据
  data() {
    return {
      list1:this.list
    }
  },
  methods: {
    changeHandle(i){
      ElMessageBox.confirm(
        '此项任务真的完成了吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '手抖了',
          type: 'warning',
        }
      )
        .then(() => {
          //当点击确定后触发的事件写在这里
          //把当前点击的行的下标传递给父组件
          this.$emit('changeD',i)
        })
        .catch(() => {
          //当点击手抖了后触发的事件写在这里
          //把state重新改为false
          this.list1[i].state=false
        })
    },
    deleteRow(i){
      ElMessageBox.confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '手抖了',
          type: 'warning',
        }
      )
        .then(() => {
          //当点击确定后触发的事件写在这里
          //把当前点击的行的下标传递给父组件
          this.$emit('del',i)
        })
        .catch(() => {
          //当点击手抖了后触发的事件写在这里
        })
    }
  },
}
</script>